//引入样式
require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/css/common.css");
require("./mine_sports_data.less");

//引入模块
const dom = require("../../utils/dom.js");
const axios = require("../../utils/axios.js");
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	//1. 点击返回上一页
	dom.get(".back").addEventListener("click", function () {
		history.back();
	});

	//2. 获取运动数据，渲染到页面上
	let res = await axios.get("/api/exercise");
	let { sum7Calorie, sum7Duration, sum7Meter, days } = res.data.data;
	dom.get("#duration").textContent = sum7Duration;
	dom.get("#calorie").textContent = sum7Calorie;
	dom.get("#meter").textContent = sum7Meter;
	dom.get("#total").textContent = days.length;
	dom.get("#continuous").textContent = days.length;

	//3. 创建图表
	console.log(days);

	//图表1：处理数据，将获取得数据处理成echarts图表需要的数据
	let x1 = days.map((v) => v.date.slice(5));
	let y1 = days.map((v) => v.sumDuration);
	const myChart1 = echarts.init(dom.get(".chart1"));
	myChart1.setOption({
		//标题
		title: {
			text: "近7天运动时长",
			left: 15,
			top: 15,
		},
		// 网格布局
		grid: {
			left: 50,
			height: 100,
		},
		//x轴
		xAxis: {
			type: "category",
			data: x1,
		},
		//y轴
		yAxis: {
			type: "value",
		},
		//数据序列
		series: [
			{
				data: y1,
				type: "bar",
				showBackground: true,
				backgroundStyle: {
					color: "rgba(180, 180, 180, 0.2)",
				},
			},
		],
		//颜色
		color: ["#4294ff"],
	});

	//图表2：饼图
	let data1 = 0; //跑步数据
	days.forEach((v) => {
		data1 += v.exerciseData[0].duration;
	});

	let data2 = 0; //骑行数据
	days.forEach((v) => {
		data2 += v.exerciseData[1].duration;
	});

	let data3 = 0; //训练数据
	days.forEach((v) => {
		data3 += v.exerciseData[2].duration;
	});

	const myChart2 = echarts.init(dom.get(".chart2"));
	myChart2.setOption({
		title: {
			text: "运动分类",
			left: 15,
			top: 15,
		},

		//图例
		legend: {
			orient: "vertical",
			left: "left",
			top: "center",
		},
		series: [
			{
				name: "运动分类",
				type: "pie",
				radius: "80%", //调整大小
				left: 80, //调整饼图的位置
				data: [
					{ value: data1, name: "跑步" },
					{ value: data2, name: "骑行" },
					{ value: data3, name: "训练" },
				],
				label: {
					//显示在饼图中的文字标签
					position: "inside",
					formatter: "{d}%",
					color: "#fff",
					fontSize: 16,
				},
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	});

	//图表3：堆叠条形图
	let data1Arr = days.map((v) => v.exerciseData[0].calorie);
	let data2Arr = days.map((v) => v.exerciseData[1].calorie);
	let data3Arr = days.map((v) => v.exerciseData[2].calorie);

	const myChart3 = echarts.init(dom.get(".chart3"));
	myChart3.setOption({
		title: {
			text: "七日运动消耗",
			left: 15,
			top: 15,
		},
		legend: {
			//图例
			left: "right",
			top: 10,
		},
		grid: {
			left: "3%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: x1, //y轴类目
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: data1Arr,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: data2Arr,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: data3Arr,
			},
		],
	});

	// 图表4：折线图
	let dataArr = days.map((v) => v.count);
	console.log(x1);
	const myChart4 = echarts.init(dom.get(".chart4"));
	myChart4.setOption({
		title: {
			text: "近7日训练次数",
			left: 15,
			top: 15,
		},
		xAxis: {
			type: "category",
			data: x1,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: dataArr,
				type: "line",
			},
		],
	});
});
